<template>
	<view class="page-index" :style="viewMode=='night'?'background-color:#404142':''">
		<!-- 通用部分 -->
		<xzj-firsthint :isCustom="isShowAddText" :text="addMiniprogramText"></xzj-firsthint>
		<fy-top-background :nightBackground="PageCur=='home'?night_background:user_background" :viewMode="viewMode"
			:bgColor="currentColor" v-if="PageCur=='home'||PageCur=='my'" class="full-width">
		</fy-top-background>
		<fy-left-tool :page="PageCur" :baseConfig="baseConfig" v-if="(PageCur=='home'||PageCur=='my')&&baseConfig==0" @showPoster="handleShowPoster" @updateTime="updateTime"
			:viewMode.sync="viewMode" class="left-tools"></fy-left-tool>
		<fy-poster appName="赚乐盒子" :logo="logoLocal" :posterQrcode="poster_qrcode" :viewMode="viewMode" :shareInfo="shareInfo" :path="path" @updatePoster="updatePoster"></fy-poster>
		<!-- 海报遮罩层 -->
		<u-overlay :show="showPoster" @click="showPoster = false">
			<view class="overlay-wrap">
				<view class="overlay-wrap__image">
					<image :src="posterImg" mode="widthFix" style="height: auto"></image>
				</view>
				<!-- <view class="overlay-wrap__btn">
					<u-button :color="viewMode=='day'?'#3586ff':'#333'"
						:customStyle="{color:viewMode=='day'?'#FFF':'#FFC200'}" size="large" shape="circle"
						@click="saveImage()">保存海报</u-button>
				</view> -->
			</view>
		</u-overlay>
		<!-- 海报遮罩层结束 -->
		<!-- 客服二维码遮罩层 -->
		<u-overlay :show="showService" @click="showService = false">
			<view class="overlay-wrap">
				<view class="overlay-wrap__image" @tap.stop>
					<image :show-menu-by-longpress="true" :src="serviceQrcode" mode="widthFix" style="height: auto">
					</image>
				</view>
				<view class="overlay-wrap__tips" :style="viewMode=='day'?'color:#333;':'color:#FFC200;'">
					长按识别上方二维码添加客服
				</view>
			</view>
		</u-overlay>
		<!-- 客服二维码遮罩层结束 -->
		<!-- 关于我们遮罩层 -->
		<u-overlay :show="showAboutUs" @click="closeShowAbout">
			<view class="overlay-wrap">
				<view class="overlay-wrap__image">
					<image :show-menu-by-longpress="true" :src="aboutUsImg" mode="widthFix" style="height: auto">
					</image>
					<view class="title">
						关于我们
					</view>
					<view class="type-writer-tips">
						<text style="line-height: 50px;">{{typeWriterText}}</text>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- 关于我们遮罩层结束 -->
		<!-- 激励视频和邀请用户遮罩层 -->
		<u-overlay :show="showTask" @click="showTask = false" class="flex-center">
			<view class="task-block">
				<image mode="widthFix" @tap.stop style="width: 400px;height: 400px;" :src="viewMode=='day'?login_background:login_background_night"></image>
				<view class="task-title flex-center" :style="viewMode=='day'?'color: #333;':'color: #efefef;'">
					{{task_title}}
				</view>
				<view class="task-tip flex-center" :style="viewMode=='day'?'color: #333;':'color: #efefef;'">
					<text>{{task_tips}}</text>
				</view>
				<view class="operate-block flex-center">
					<view v-if="video_ad_id" class="margin-right">
						<button  plain class="task-btn flex-center" @click="showVideo" :style="viewMode=='day'?'background-color: #3586ff;color: #fff;':'background-color: #333;color: #FFC200;'">观看视频</button>
					</view>
					<view>
						<button plain class="task-btn flex-center" open-type="share" @click="share_invite = 1" :style="viewMode=='day'?'background-color: #FFC200;color: #333;margin-left:0px;':'background-color: #FFC200;color: #333;margin-left:0px;'">去邀请(需{{invite_total}}位)</button>
					</view>
					
				</view>
				
			</view>
		</u-overlay>
		<!-- 激励视频和邀请用户遮罩层结束 -->
		<!-- 通用部分结束 -->

		<!-- 首页部分 -->
		<fy-music-play @notVip="handleNotVip" :userinfo="userinfo" :time.sync="time" :mode.sync="viewMode" :baseConfig="baseConfig" v-if="currentMusic&&PageCur=='home'"
			:music="currentMusic" class="music-play"></fy-music-play>
		<fy-scroll-bar :musicCatList="musicCatList" :bgColor="currentColor" :viewMode="viewMode" @selectMusic="updateCurrentMusic" v-if="PageCur=='home'" class="full-width">
		</fy-scroll-bar>
		<!-- 首页部分结束 -->
		<!-- 冥想页面部分 -->
		<fy-item-list @back="PageCur='home'" :bannerId="banner_ad_id" :baseConfig="baseConfig" :userinfo="userinfo" @notVip="handleNotVip" :mingxiangList="mingxiangList" v-if="PageCur=='lotus'" class="full-width"></fy-item-list>
		<!-- 冥想页面部分结束 -->
		<!-- 我的页面部分 -->
		<fy-my-menu-list :baseConfig="baseConfig" :jumpAppId="jump_app_id" :bannerId="banner_ad_id" @showAbout="handleShowAbout" :currentCount="currentInviteCount"
			@showServiceQrcode="showService = true" :userinfo="userinfo" :inviteTotal="invite_total"
			:viewMode="viewMode" @setShareInvite="setShareInvite" class="full-width margin-top" v-if="PageCur=='my'">
		</fy-my-menu-list>
		<fy-userinfo :userinfo="userinfo" @showLogin="showLogin" v-if="PageCur=='my'" class="fy-userinfo"></fy-userinfo>
		<!--我的页面部分结束 -->

		<!-- 用户登录 -->
		<userlogin :loginTips="login_tips" :loginTitle="login_title" :viewMode="viewMode" :showLoginModal.sync="showLoginModal" :loginBackground="login_background" :loginBackgroundNight="login_background_night"
			:_userinfo.sync="userinfo" @afterLogin="afterLogin"></userlogin>
		<!-- 用户登录结束 -->

		<!-- 底部导航栏 -->
		<view class="cu-bar tabbar shadow foot" :class="viewMode=='day'?'bg-white':'bg-black'">
			<view class="action" @click="NavChange" data-cur="home">
				<view class='cuIcon-cu-image'>
					<image v-if="viewMode=='day'" :src="'/static/icon/home' + [PageCur=='home'?'_cur':''] + '.png'">
					</image>
					<image v-if="viewMode=='night'"
						:src="'/static/icon/home_night' + [PageCur=='home'?'_cur':''] + '.png'"></image>
				</view>
				<view v-if="viewMode=='day'" :class="PageCur=='home'?'text-blue':'text-gray'">{{navText.index_name}}</view>
				<view v-if="viewMode=='night'" :class="PageCur=='home'?'text-yellow':'text-gray'">{{navText.index_name}}</view>
			</view>
			<view class="action" v-if="baseConfig==0" @click="NavChange" data-cur="lotus">
				<view class='cuIcon-cu-image'>
					<image v-if="viewMode=='day'" :src="'/static/icon/lotus' + [PageCur == 'lotus'?'_cur':''] + '.png'">
					</image>
					<image v-if="viewMode=='night'"
						:src="'/static/icon/lotus_night' + [PageCur == 'lotus'?'_cur':''] + '.png'"></image>
				</view>
				<view v-if="viewMode=='day'" :class="PageCur=='lotus'?'text-blue':'text-gray'">{{navText.mingxiang_name}}</view>
				<view v-if="viewMode=='night'" :class="PageCur=='lotus'?'text-yellow':'text-gray'">{{navText.mingxiang_name}}</view>
			</view>
			<view class="action" @click="NavChange" data-cur="my">
				<view class='cuIcon-cu-image'>
					<image v-if="viewMode=='day'" :src="'/static/icon/my' + [PageCur == 'my'?'_cur':''] + '.png'">
					</image>
					<image v-if="viewMode=='night'"
						:src="'/static/icon/my_night' + [PageCur == 'my'?'_cur':''] + '.png'"></image>
				</view>
				<view v-if="viewMode=='day'" :class="PageCur=='my'?'text-blue':'text-gray'">{{navText.my_name}}</view>
				<view v-if="viewMode=='night'" :class="PageCur=='my'?'text-yellow':'text-gray'">{{navText.my_name}}</view>
			</view>
		</view>
		<!-- 底部导航栏结束 -->
	</view>
</template>

<script>
	import Utils from "@/static/js/common/utils.js"
	import {
		mixin
	} from "@/static/js/common/mixin.js"
	export default {
		mixins: [mixin],
		data() {
			return {
				logoLocal:require('@/static/images/logo.png'),
				showTask:false,
				currentColor:"#3586ff",
				showAboutUs: false,
				showService: false,
				serviceQrcode: null,
				invite_total: 0,
				time: null,
				minutes: 10,
				showLoginModal: false,
				posterImg: null,
				aboutUsImg: null,
				userinfo: null,
				PageCur: "home",
				currentMusic: null,
				baseConfig: 0,
				viewMode: "night",
				shareInfo: {
					share_title: "夜深了，你还没睡吗？",
					share_desc: "来这里，让清风细雨、谧静深幽伴你入眠。",
					share_pic: null
				},
				night_background: null,
				login_background: null,
				login_background_night:null,
				user_background:"",
				poster_bottom_text: "长按识别上方小程序码",
				share_invite: 0,
				showPoster: false,
				uid: 0,
				currentInviteCount: 0,
				path: "/pages/index/index",
				app_intro:"",
				typeWriterTimer:false,
				timer:null,
				typeWriterText:"",
				mingxiangList:[],
				musicCatList:[],
				backgroundList:["#8799a3","#CC3333","#996699","#3399CC","#6739b6","#65C87A","#e03997","#FFCC33","#333333","#3586ff","#f37b1d","#8dc63f","#1cbbb4"],
				screen_ad_id:"",
				video_ad_id:"",
				banner_ad_id:"",
				videoAd:null,
				isFinishTodayVideo:null,
				poster_qrcode:null,
				app_name:"催眠冥想",
				logo:"",
				mini_qrcode:"",
				jump_app_id:"",
				login_title:"",
				login_tips:"",
				task_title:"",
				task_tips:"",
				navText:{index_name:"",mingxiang_name:"",my_name:""},
				addMiniprogramText:"",
				isShowAddText:true
			}
		},
		onShareAppMessage(res) {
			this.path = '/pages/index/index';
			if (this.userinfo == null) {
				if (this.currentMusic != null) {
					this.path = '/pages/index/index?music_id=' + this.currentMusic.music_id;
				} else {
					this.path = '/pages/index/index';
				}
			} else {
				if (this.currentOpenSucai != null) {
					this.path = '/pages/index/index?music_id=' + this.currentMusic.music_id + '&uid=' + this.userinfo
						.user_id + "&share_invite=" + this.share_invite;
				} else {
					this.path = '/pages/index/index?uid=' + this.userinfo.user_id + "&share_invite=" + this.share_invite;
				}
			}
			return {
				title: this.shareInfo.share_title,
				type: 0,
				path: this.path,
				summary: this.shareInfo.share_desc,
				imageUrl: this.shareInfo.share_pic
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			let queryParams = '';
			if (this.userinfo == null) {
				if (this.currentMusic != null) {
					queryParams = 'music_id=' + this.currentMusic.music_id;
				}
			} else {
				if (this.currentOpenSucai != null) {
					queryParams = 'music_id=' + this.currentMusic.music_id + '&uid=' + this.userinfo.user_id;
				} else {
					queryParams = 'uid=' + this.userinfo.user_id;
				}
			}
			return {
				title: this.shareInfo.share_title,
				type: 0,
				query: queryParams,
				summary: this.shareInfo.share_desc,
				imageUrl: this.shareInfo.share_pic
			}
		},
		onShow() {
			if(this.isUserLogin()){
				this.$httpApi.getInviteCount({
					user_id: this.userinfo.user_id
				}).then(res => {
					if (res.data.status == 200) {
						this.currentInviteCount = res.data.data;
						if(res.data.is_finish==1){
							this.userinfo.is_vip = 1;
							uni.setStorageSync("userinfo",this.userinfo);
						}
					}
				})
			}
		},
		onLoad(options) {
			this.userinfo = uni.getStorageSync("userinfo");
			if(this.isUserLogin()){
				this.$httpApi.refreshUserinfo({user_id:this.userinfo.user_id}).then(res=>{
					if(res.data.status==200){
						this.userinfo = res.data.data;
						uni.setStorageSync("userinfo",this.userinfo);
						uni.setStorageSync("token",res.data.token);
					}
					
				})
			}
			if (options) {
				if(options.scene){
					let scene=decodeURIComponent(options.scene);
					options.uid = scene;
					options.share_invite = 1;
				}
				if (options.uid) {
					this.uid = options.uid;
					let pid = uni.getStorageSync("pid");
					if (pid == 0 || pid == undefined || pid == "") {
						uni.setStorageSync("pid", options.uid);
					}
					if (options.share_invite == 1) {
						this.share_invite = 1;
						if (this.isLogin()) {
							let param = {
								user_id: options.uid,
								help_user_id: this.userinfo.user_id
							};
							if(this.userinfo.user_id==options.uid){
								uni.showToast({
									title:"不可给自己助力",
									icon:"error"
								})
							}else{
								this.handleInviteUser(param);
							}
							
						}
					}
				}
			}
			this.checkFinishVideo();
			this.getUserQrcode();
			this.getMusicCatList()
			this.getMingxiangList();
			this.initTime();
			this.initConfig();
			this.initViewMode()
			
		},
		methods: {
			initViewMode(){
				let mode = uni.getStorageSync("mode");
				if (mode) {
					this.viewMode = uni.getStorageSync("mode");
				}else{
					this.viewMode = "night";
					uni.setStorageSync("mode","night");
				}
			},
			initConfig(){
				this.$httpApi.getBaseConfig().then(res => {
					res.data.data.forEach(item => {
						if(item.name=="add_text"){
							this.addMiniprogramText = item.data;
						}
						if (item.name == 'is_verify') {
							this.baseConfig = parseInt(item.data);
						}
						if (item.name == "share_title") {
							this.shareInfo.share_title = item.data;
						}
						if (item.name == "share_desc") {
							this.shareInfo.share_desc = item.data;
						}
						if (item.name == "share_pic") {
							this.shareInfo.share_pic = item.data;
						}
						if (item.name == 'night_background') {
							this.night_background = item.data;
						}
						if (item.name == "poster_bottom_text") {
							this.poster_bottom_text = item.data;
						}
						if (item.name == "login_background") {
							this.login_background = item.data;
						}
						if (item.name == "login_background_night") {
							this.login_background_night = item.data;
						}
						if (item.name == "invite_total") {
							this.invite_total = parseInt(item.data);
						}
						if (item.name == "service_qrcode") {
							this.serviceQrcode = item.data;
						}
						if (item.name == 'about_us_background') {
							this.aboutUsImg = item.data;
						}
						if(item.name=="app_intro"){
							this.app_intro = item.data;
						}
						if(item.name=="user_background"){
							this.user_background = item.data;
						}
						if (item.name == 'screen_ad_id') {
							this.screen_ad_id = item.data;
						}
						if(item.name=="video_ad_id"){
							this.video_ad_id = item.data;
						}
						if(item.name=="banner_ad_id"){
							this.banner_ad_id = item.data;
						}
						if(item.name=="site_title"){
							this.app_name = item.data;
						}
						if(item.name=="logo"){
							this.logo = item.data;
						}
						if(item.name=="mini_qrcode"){
							this.mini_qrcode = item.data;
						}
						if(item.name=="jump_app_id"){
							this.jump_app_id = item.data;
						}
						if(item.name=="login_title"){
							this.login_title = item.data;
						}
						if(item.name=="login_tips"){
							this.login_tips = item.data;
						}
						if(item.name=="task_title"){
							this.task_title = item.data;
						}
						if(item.name=="task_tips"){
							this.task_tips = item.data;
						}
						if(item.name=="index_name"){
							this.navText.index_name = item.data;
						}
						if(item.name=="mingxiang_name"){
							this.navText.mingxiang_name = item.data;
						}
						if(item.name=="my_name"){
							this.navText.my_name = item.data;
						}
						//加载插屏广告
						if(this.screen_ad_id){
							Utils.interstitial.load(this.screen_ad_id);
							Utils.interstitial.show();
						}
					})
				
				})
			},
			initTime(){
				this.minutes = uni.getStorageSync("minutes");
				if (!this.minutes) {
					this.minutes = 10;
					uni.setStorageSync("minutes",10);
				}
				this.updateTime()
			},
			checkFinishVideo(){
				this.isFinishTodayVideo = uni.getStorageSync(this.getToday());
				if(this.isFinishTodayVideo=="already"&&this.isUserLogin()){
					this.userinfo.is_vip = 1;
				}
			},
			handleInviteUser(param){
				this.$httpApi.checkInviteHelp(param).then(res => {
					if (res.data.data == 201) {
						//助力
						this.$httpApi.helpUser(param).then(res => {
							if (res.data.status == 200) {
								uni.showToast({
									title: "助力成功",
									icon: "success"
								})
							}
						})
					} else {
						uni.showToast({
							title: "您助力过该好友",
							icon: "error"
						})
					}
				})
			},
			getUserQrcode(){
				if(this.isUserLogin()){
					this.$httpApi.getMiniQrcode({user_id:this.userinfo.user_id,openid:this.userinfo.openid}).then(res=>{
						console.log(res.data.status);
						if(res.data.status==200){
							this.poster_qrcode = res.data.data;
						}else{
							this.poster_qrcode = this.mini_qrcode;
						}
						
					})
				}
			},
			getMusicCatList(){
				this.$httpApi.getMusicCatList({limit:1000}).then(res=>{
					if(res.data.status==200){
						res.data.data.forEach(item=>{
							if(item.music_intro){
								item.music_intro = item.music_intro.replace(/\<img/gi, "<img style='max-width:100%;height:auto;display:block;'");
							}
							this.musicCatList.push(item);
						})
						this.currentMusic = this.musicCatList[0].music[0];
					}
				})
			},
			getMingxiangList(){
				this.$httpApi.getMingxiangList().then(res=>{
					res.data.data.forEach(item=>{
						item['status'] = false;
						if(item.music_intro){
							item.music_intro = item.music_intro.replace(/\<img/gi, "<img style='max-width:100%;height:auto;display:block;'");
						}
						
						this.mingxiangList.push(item);
					});
				});
			},
			getRandomColor(){
				let _num = Math.floor(Math.random()*this.backgroundList.length)
				this.currentColor = this.backgroundList[_num];
			},
			handleShowAbout(){
				let that = this;
				this.showAboutUs = true;
				if(!this.typeWriterTimer){
					setTimeout(()=>{
						that.typeWriter()
					},500);
					
				}
			},
			setShareInvite(val) {
				this.share_invite = val;
			},
			isLogin() {
				if (typeof(this.userinfo) == "undefined" || this.userinfo == "" || JSON.stringify(this.userinfo) == "{}" || this.userinfo==null) {
					this.showLoginModal = true;
					return false;
				} else {
					return true;
				}
			},
			isUserLogin(){
				if (typeof(this.userinfo) == "undefined" || this.userinfo == "" || JSON.stringify(this.userinfo) == "{}" || this.userinfo==null) {
					return false;
				} else {
					return true;
				}
			},
			updateTime() {
				this.time = null;
				this.minutes = uni.getStorageSync("minutes");
				let curData = new Date();
				curData.setMinutes(curData.getMinutes() + this.minutes);
				this.time = curData.getTime() - (new Date()).getTime();
			},
			afterLogin(user) {
				this.userinfo = user;
				if(this.isFinishTodayVideo=="already"){
					this.userinfo.is_vip = 1;
				}
				this.$httpApi.getInviteCount({
					user_id: this.userinfo.user_id
				}).then(res => {
					if (res.data.status == 200) {
						this.currentInviteCount = res.data.data;
						if(res.data.is_finish==1){
							this.userinfo.is_vip = 1;
							uni.setStorageSync("userinfo",this.userinfo);
						}
					}
				})
				this.getUserQrcode()
				if (this.share_invite == 1 && this.uid != 0) {
					let param = {
						user_id: this.uid,
						help_user_id: this.userinfo.user_id
					};
					this.$httpApi.checkInviteHelp(param).then(res => {
						if (res.data.data == 201) {
							//助力
							this.$httpApi.helpUser(param).then(res => {
								if (res.data.status == 200) {
									uni.showToast({
										title: "助力成功",
										icon: "success"
									})
								}
							})
						} else {
							uni.showToast({
								title: "您助力过该好友",
								icon: "error"
							})
						}
					})
				}
			},
			showLogin() {
				this.showLoginModal = true;
			},
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			updateCurrentMusic(music) {
				if(this.currentMusic.music_url!=music.music_url){
					//需要观看激励视频
					//201用户登录但非会员
					//202用户未登录
					if(music.is_need_video==1){
						if(this.isUserLogin()){
							if(this.userinfo.is_vip!=1){
								this.handleNotVip(201);
							}
							return;
						}else{
							this.handleNotVip(202);
							return;
						}
					}
					this.updateTime()
					this.getRandomColor()
					this.currentMusic = music;
				}
			},
			updatePoster(poster) {
				this.posterImg = poster;
			},
			nav2Url(url) {
				uni.navigateTo({
					url: "/pages/common/webview?url=" + encodeURIComponent(url)
				})
			},
			saveImage() {
				let that = this;
				this.saveImageMixin(this.posterImg).then(res => {
					if (res == 200) {
						that.showPoster = false;
						uni.showToast({
							title: "保存成功",
							icon: "success"
						})
					} else {
						uni.showToast({
							title: "授权成功",
							icon: "success"
						})
					}
				}).catch(err => {
					if (err == 202) {
						that.showPoster = false;
						uni.showToast({
							title: "授权失败",
							icon: "error"
						})
					}
				})
			},
			typeWriter() {
				var that = this;
				var index = 0;
				var temp = "";
				if(that.typeWriterText!=""){
					temp = that.typeWriterText;
				}
				this.timer = setInterval(function() {
					if (temp.length < that.app_intro.length) {
						temp += that.app_intro[index]
						index = (index + 1);
					}
					that.typeWriterText = temp;
					if(temp.length>= that.app_intro.length){
						clearInterval(this.timer);
						that.typeWriterTimer = true;
					}
				}, 200);
				
			},
			closeShowAbout(){
				this.showAboutUs = false;
				if(!this.typeWriterTimer){
					clearInterval(this.timer);
				}
			},
			//id就是传入的广告位id
			videoLoad(id) {
				if (uni.createRewardedVideoAd) {
					this.videoAd = uni.createRewardedVideoAd({
						adUnitId: id
					})
					this.videoAd.onLoad(() => {
						 console.log('激励视频 广告加载成功')
					})
					this.videoAd.onError((err) => {
						console.log('onError event emit')
					})
					this.videoAd.onClose((res) => {
						console.log(res);
						// 用户点击了【关闭广告】按钮
						if (res && res.isEnded) {
							// 正常播放结束，可以下发奖励
			                this.videoAd.offClose();
							console.log("观看完毕");
							let today = this.getToday();
							uni.setStorageSync(today,"already");
							if(this.isUserLogin()){
								this.userinfo.is_vip = 1;
							}
						} else {
							// 播放中途退出，不下发游戏奖励
							console.log("未观看完毕")
						}
					})
				}
			},
			showVideo() {
				//加载激励视频
				if(!this.videoAd){
					this.videoLoad(this.video_ad_id);
				}
				if (this.videoAd) {
					this.videoAd.show().catch(() => {
						// 失败重试
						this.videoAd.load()
							.then(() => {
								this.videoAd.show();
							})
							.catch(err => {
								console.log('激励视频 广告显示失败')
							})
					})
				}
			},
			handleNotVip(e){
				//201用户登录但非会员
				//202用户未登录
				console.log(e)
				if(e==201){
					this.showTask = true;
				}else{
					this.showLoginModal = true;
				}
			},
			handleShowPoster(){
				if(this.isLogin()){
					this.showPoster = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-index {
		height: 100vh;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: relative;

		.music-play {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			margin: auto;
			z-index: 1001;
			height: 250px;
		}

		.left-tools {
			position: fixed;
			top: 60px;
			left: 1.5em;
			z-index: 1002;
		}

		.fy-userinfo {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			margin: auto;
			z-index: 1001;
			height: 250px;
		}

		.overlay-wrap {
			@include flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			flex: 1;
			&__image {
				position: relative;
				.title {
					left: 0;
					right: 0;
					font-size: 14px;
					color: #949494;
					top: 1em;
					position:absolute;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.type-writer-tips {
					font-size: 12px;
					color:#efefef;
					position: absolute;
					top: 3em;
					padding:2em;
				}
			}
			.overlay-title {
				width: 280px;
				padding: 1em 0em .8em 0em;
				border-radius: 10px 10px 0px 0px;
				text-align: left;
				color: #333;
				background-color: #FFC200;
				font-size: 12px;
			}

			/deep/.u-form {
				background-color: #FFF;
				padding: 30px;
				width: 220px;
				border-radius: 0px 0px 10px 10px;
			}

			&__tips {
				margin-top: .5em;
				font-size: 12px;
			}

			&__btn {
				margin-top: 1em;
				width: 280px;
				border-radius: 25px;
			}
		}
	
		.task-block {
			margin-top: 30%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			position:relative;
			.task-title {
				position:absolute;
				left:0;
				right:0;
				top:170px;
				font-size: 24px;
				font-weight: 900;
			}
			.task-tip {
				position:absolute;
				left:0;
				right:0;
				top:240px;
				font-size: 14px;
				font-weight: 900;
			}
			.operate-block {
				position:absolute;
				left:0;
				right:0;
				bottom: 1em;
				width: 100%;
				.task-btn {
					height: 40px;
					border-radius: 15px;
					font-size:14px;
					border:0px;
				}
			}
			
		}
	}
</style>
